<template>
  <el-aside :width="asideWidth" style="box-shadow: 1px 0px 5px #888888;overflow-x: hidden;">
    <div style="height: 60px;display: table;width: 100%;">
      <div style="display: table-cell;text-align: center;vertical-align: middle;">
        <img src="/static/images/aside_logo.svg">
      </div>
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      :default-active="activeNav"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose">
      <el-menu-item index="1" @click="clickMenu('overview')">
        <i class="fa fa-tachometer"></i>
        <span slot="title">项目看板</span>
      </el-menu-item>
      <el-menu-item index="2" @click="clickMenu('calendar')">
        <i class="fa fa-calendar-check-o"></i>
        <span slot="title">工作日历</span>
      </el-menu-item>
      <el-menu-item index="3" @click="clickMenu('project')">
        <i class="fa fa-file-text-o"></i>
        <span slot="title">我的项目</span>
      </el-menu-item>
      <el-submenu index="4" @click="clickMenu('system')">
        <template slot="title"><i class="fa fa-id-card"></i><span style="margin-left: 5px;">人员管理</span></template>
        <el-menu-item-group>
          <el-menu-item :index="'4-'+(index+1)" v-for="(menu,index) in empMenu" :key="index" @click="clickMenu1(menu,index)">
            {{menu.ch_name}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5" @click="clickMenu('system')">
        <template slot="title"><i class="fa fa-cogs"></i><span style="margin-left: 5px;">系统管理</span></template>
        <el-menu-item-group>
          <el-menu-item index="5-1" @click="clickMenu('proTemplate')">项目模版</el-menu-item>
          <el-menu-item index="5-2" @click="clickMenu('empTemplate')">人员模版</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    <div :style="'text-align: center;position: fixed; bottom: 0;margin-bottom: 10px;width: '+asideWidth+';'">
      <i :class="isCollapse?'fa fa-angle-right collapse':'fa fa-angle-left collapse'" @click="collapse"></i>
    </div>
  </el-aside>
</template>
<style>
</style>

<script>
export default {
  methods: {
    handleOpen (key, keyPath) {
      console.log(key,keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key,keyPath)
    },
    clickMenu (name){
      this.$store.commit('setIndex', [0])
      this.$store.commit('setMenuName', name)
      this.$router.push({ name: name })
    },
    clickMenu1 (menu,index){
      this.$store.commit('setIndex', [index+1, menu.ch_name])
      this.$store.commit('setMenuName', 'employee')
      this.$router.push({'path': '/employee/'+menu.name,query:{id:menu.id}})
    },
    collapse () {
      if(this.isCollapse){
        this.$store.commit('setCollapse', false)
      }else{
        this.$store.commit('setCollapse', true)
      }
    }
  },
  computed: {
    activeNav () {
      return this.$store.state.tab.activeNav
    },
    empMenu () {
      return this.$store.state.tab.menu.employee
    },
    isCollapse () {
      return this.$store.state.tab.isCollapse
    },
    asideWidth () {
      return this.$store.state.tab.asidewidth
    }
  }
}
</script>
<style scoped>
i{
  width: 16px;
}

.collapse{
  cursor: pointer;
  font-size: 30px;
}

.router-link-active{
  background-color: #e2f0ff;
  height: 50px;
  line-height: 50px;
  min-width: 200px;
}


</style>
